<template>
  <div class="mainbox">
    <banner></banner>
    <main-content :catname="title">
      <div slot="menu_list">
        <dl>
          <dt class="menu_dt" :style="{backgroundImage: 'url(' + menu_bg + ')'}"><span class="iconfont icon-dangwugongkai"></span>{{title}}</dt>
          <dd v-for="(item,index) in menu_list" class="menu_dd" :class="{'hover':cur_tab ==item.id }"
              @click="onTab(item)">{{item.title}}
          </dd>
        </dl>
      </div>

      <div class="inner_content" slot="inner_content">
        <div class="page_con">
          <NoData v-if="flag"></NoData>
          <!--<NoData v-if="menu_list.length==0"></NoData>-->

          <div v-infinite-scroll="load" v-for="(item,index) in menu_list">
            <div class="page_con" v-if="item.id == cur_tab" v-html="item.content"></div>
          </div>

        </div>
      </div>

    </main-content>

    <footer-bar></footer-bar>

    <main-menu></main-menu>
  </div>
</template>

<script>
  import Banner from '@/components/bannder/Banner';
  import MainMenu from '@/components/mainmenu/MainMenu';
  import mainContent from '@/components/content/mainContent';
  import footerBar from '@/components/content/footerBar';
  import NoData from '../../components/nodata/NoData';

  export default {
    name: "Pages",
    data() {
      return {
        flag:false,
        type: '',
        page: 1,
        limit: 10,
        menu_list: [],
        menu_bg:'',
        cur_tab: '',
        scroll: "",//存储滚动条的高度
        title:''
      }
    },
    components: {
      Banner,
      MainMenu,
      mainContent,
      footerBar,
      NoData
    },

    created() {
      this.menu_bg=this.$util.storage.get("menu_bg");
      this.type = this.$route.query.type;
      this.title=this.$route.query.name;
      console.log('type', this.type)
      this.getContent();
    },

    watch: {
      //监听相同路由下参数变化的时候，从而实现异步刷新
      '$route'(to, from) {
        this.type = this.$route.query.type;
        this.getContent();
      },

    },

    methods: {

      load() {
        console.log('加载更多')
      },

      getContent() {
        let that = this;
        that.$http.get('/api/ScreenkApi/getColumnContent', {vollege_id:this.$util.vollege_id,type: that.type, page: that.page, limit: that.limit}, r => {
          console.log('', r);
          if (r.data.data.length==0){
            this.flag=true;
          }
          that.menu_list = r.data.data;
          that.cur_tab = r.data.data[0].id;


        })
      },

      onTab(event) {
        this.cur_tab = event.id;
      }

    },

  }
</script>

<style scoped>
  .inner_content {
    /*padding: 60px 50px 0 260px;*/
    padding-left: 60px;
    padding-top: 60px;
    width: 1300px;
  }




  .page_con {
    height: 660px !important;
    overflow-y: scroll !important;
    width: 1300px !important;
  }

  .page_con >>> img{
    max-width: 100%;
  }










</style>
